import { BasicComponent } from './basic/basic.component';
import { GutterComponent } from './gutter/gutter.component';
import { OffsetComponent } from './offset/offset.component';
import { ResponsiveComponent } from './responsive/responsive.component';
import { ResponsiveMoreComponent } from './responsive-more/responsive-more.component';
import { FlexAlignComponent } from './flex-align/flex-align.component';
import { FlexJustifyComponent } from './flex-justify/flex-justify.component';

export const GridConfig = {
  location: 'Grid',
  description: '24 栅格系统',
  description_en: '',
  component: [
    {
      demo: BasicComponent,
      codePath: 'showcase/grid/basic/basic.component',
      demoTitle: '基本栅格',
      demoTitle_en: 'Basic',
      demoDescription: '使用 lv-row 和 lv-col，就可以创建一个基本的栅格系统。所有的 lv-col 必须在 lv-row 中',
      demoDescription_en: 'Using lv-row and lv-col, a basic grid system can be created. All lv-col must be in lv-row',
    },
    {
      demo: GutterComponent,
      codePath: 'showcase/grid/gutter/gutter.component',
      demoTitle: '栅格间隔',
      demoTitle_en: 'Grid gutter',
      demoDescription: `栅格常常需要和间隔进行配合，你可以使用 lv-row 的 lvGutter 属性，推荐使用 (16+8n)px 作为栅格间隔。(n 是自然数)。如果要支持响应式，可以写成 { xs: 8, sm: 16, md: 24, lg: 32, xl: 32, xxl: 32 }。`,
      demoDescription_en: `You can use the lvGutter property of lv-row as grid spacing, we recommend set it to (16 + 8n) px. (n stands for natural number). You can set it to a object like { xs: 8, sm: 16, md: 24, lg: 32, xl: 32, xxl: 32 } for responsive design.`,
    },
    {
      demo: OffsetComponent,
      codePath: 'showcase/grid/offset/offset.component',
      demoTitle: '栅格偏移',
      demoTitle_en: 'Grid offset',
      demoDescription: `使用 lvOffset 可以将列向右侧偏。例如，lvOffset="4" 将元素向右侧偏移了 4 个列（column）的宽度。`,
      demoDescription_en: `lvOffset can set the column to the right side. For example, using lvOffset = "4" can set the element shifted to the right four columns width.`,
    },
    {
      demo: FlexAlignComponent,
      codePath: 'showcase/grid/flex-align/flex-align.component',
      demoTitle: '垂直对齐',
      demoTitle_en: 'Vertical alignment',
      demoDescription: `子元素垂直对齐。`,
      demoDescription_en: `Child elements vertically aligned.`,
    },
    {
      demo: FlexJustifyComponent,
      codePath: 'showcase/grid/flex-justify/flex-justify.component',
      demoTitle: '水平对齐',
      demoTitle_en: 'Horizontal alignment',
      demoDescription: `子元素根据不同的值 'start'、'center'、'end'、'space-between'、'space-around' 和 'space-evenly'，分别定义其在父节点里面的排版方式。`,
      demoDescription_en: `Child elements depending on the value of the 'start',' center', 'end',' space-between', 'space-around', 'space-evenly', which are defined in its parent node layout mode.`,
    },
    {
      demo: ResponsiveComponent,
      codePath: 'showcase/grid/responsive/responsive.component',
      demoTitle: '响应式布局',
      demoTitle_en: 'Responsive',
      demoDescription: `预设六个响应尺寸：'xs'，'sm'，'md'，'lg'，'xl'，'xxl'`,
      demoDescription_en: `Here preset six dimensions: 'xs', 'sm', 'md', 'lg', 'xl'.`,
    },
    {
      demo: ResponsiveMoreComponent,
      codePath: 'showcase/grid/responsive-more/responsive-more.component',
      demoTitle: '其他属性的响应式',
      demoTitle_en: 'More responsive',
      demoDescription: `'span'，'pull'，'push'，'offset'，'order' 属性可以通过内嵌到 'lvXs'，'lvSm'，'lvMd'，'lvLg'，'lvXl'，'lvXXl' 属性中来使用。其中 'lvXs="6"' 相当于 '[lvXs]="{ span: 6 }"'。`,
      demoDescription_en: `'span', 'pull', 'push', 'offset', 'order' property can be embedded into 'lvXs', 'lvSm', 'lvMd', 'lvLg', 'lvXl', 'lvXXl' properties to use, where 'lvXs="6"' is equivalent to '[lvXs]="{ span: 6 }"'.`,
    },
  ],
  selector: '',
  snippet: ``,
  mApi: [
    {
      name: 'lv-row',
      name_en: 'lv-row',
      selector: 'lv-row',
      api: [
        {
          attribute: 'lvAlign',
          type: `'start' | 'end' | 'center'`,
          default: '',
          description: `垂直对齐方式`,
          description_en: `Vertical alignment`,
        },
        {
          attribute: 'lvJustify',
          type: `'start' | 'end' | 'center' | 'space-around' | 'space-between' | 'space-evenly'`,
          default: '',
          description: `水平对齐方式`,
          description_en: `Horizontal alignment`,
        },
        {
          attribute: 'lvGutter',
          type: ` number | LvGutterObject | [number, number] | [LvGutterObject, LvGutterObject]`,
          default: '',
          description: `栅格间隔，可使用像素值或对象来设置水平间隔，如 { xs: 8, sm: 16, md: 24}。或者使用数组形式同时设置 [水平间距, 垂直间距]`,
          description_en: `Grid interval, you can use pixel value or object to set the horizontal interval, such as { xs: 8, sm: 16, md: 24}. Or use an array to set [horizontal spacing, vertical spacing] at the same time`,
        },
      ],
      event: [],
    },
    {
      name: 'lv-col',
      name_en: 'lv-col',
      selector: 'lv-col',
      api: [
        {
          attribute: 'lvSpan',
          type: `number`,
          default: '',
          description: `栅格占位格数，为 0 时相当于 display: none`,
          description_en: `The number of grid spacers, when it is 0, it is equivalent to display: none`,
        },
        {
          attribute: 'lvOffset',
          type: `string | number`,
          default: '',
          description: `栅格左侧的间隔格数，间隔内不可以有栅格`,
          description_en: `The number of grids on the outer side of the grid, no grids are allowed on the inner side of the grid`,
        },
        {
          attribute: 'lvOrder',
          type: `string | number`,
          default: '',
          description: `栅格顺序`,
          description_en: `Grid order`,
        },
        {
          attribute: 'lvPull',
          type: `string | number`,
          default: '',
          description: `栅格左移格数`,
          description_en: `Move the grid to the left`,
        },
        {
          attribute: 'lvPush',
          type: `string | number`,
          default: '',
          description: `栅格右移格数`,
          description_en: `Move the grid to the right`,
        },
        {
          attribute: 'lvXs',
          type: 'string | number | Record< string, any >',
          default: '',
          description: `< 576px 响应式栅格，可为栅格数或一个包含其他属性的对象`,
          description_en: `< 576px responsive grid, calibrated grid count or an object containing other properties`,
        },
        {
          attribute: 'lvSm',
          type: 'string | number | Record< string, any >',
          default: '',
          description: `≥576px 响应式栅格，可为栅格数或一个包含其他属性的对象`,
          description_en: `≥576px responsive grid, calibrated grid count or an object containing other properties`,
        },
        {
          attribute: 'lvMd',
          type: 'string | number | Record< string, any >',
          default: '',
          description: `≥768px 响应式栅格，可为栅格数或一个包含其他属性的对象`,
          description_en: `≥768px responsive grid, calibrated grid count or an object containing other properties`,
        },
        {
          attribute: 'lvLg',
          type: 'string | number | Record< string, any >',
          default: '',
          description: `≥992px 响应式栅格，可为栅格数或一个包含其他属性的对象`,
          description_en: `≥992px responsive grid, calibrated grid count or an object containing other properties`,
        },
        {
          attribute: 'lvXl',
          type: 'string | number | Record< string, any >',
          default: '',
          description: `≥1200px 响应式栅格，可为栅格数或一个包含其他属性的对象`,
          description_en: `≥1200px responsive grid, calibrated grid count or an object containing other properties`,
        },
        {
          attribute: 'lvXXl',
          type: 'string | number | Record< string, any >',
          default: '',
          description: `≥1472px 响应式栅格，可为栅格数或一个包含其他属性的对象`,
          description_en: `≥1472px responsive grid, calibrated grid count or an object containing other properties`,
        },
      ],
      event: [],
    },
  ],
};
